<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慧题通-新增题目</title>
</head>
<body>
<el-menu
        id="menu"
        default-active="4"
        class="el-menu-vertical-demo"
        style="width: 135px;float: left"
>
    <el-menu-item index="0" @click="toMain">
        <i class="el-icon-help"></i>
        <span slot="title">主页</span>
    </el-menu-item>
    <el-menu-item index="1" @click="toMyQuestion">
        <i class="el-icon-location"></i>
        <span slot="title">我的题目</span>
    </el-menu-item>
    <el-menu-item index="2" @click="toAllQuestion">
        <i class="el-icon-menu"></i>
        <span slot="title">全站题目</span>
    </el-menu-item>
    <el-menu-item index="3" @click="toDoQuestion">
        <i class="el-icon-setting"></i>
        <span slot="title">练习题目</span>
    </el-menu-item>
    <el-menu-item index="4">
        <i class="el-icon-document"></i>
        <span slot="title">添加题目</span>
    </el-menu-item>
</el-menu>
<div id="app" v-loading="loading">
    <!--新增分类对话框-->
    <el-dialog title="新增分类" :visible.sync="dialogFormVisible">
        <el-form :model="categoryForm">
            <el-form-item label="分类名称">
                <el-input v-model="categoryForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公开">
                <el-switch v-model="categoryForm.open"></el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCategory">确 定</el-button>
        </div>
    </el-dialog>

    <el-tabs :tab-position="'right'" style="height: 100%;">
        <el-tab-pane label="新增选择题">
            <!--新增选择题-->
            <el-row type="flex" justify="center" align="middle" style="height:100%">
                <el-col style="width:800px;">
                    <el-card class="box">
                        <p style="text-align: center">新增选择题</p>
                        <el-form ref="form" :model="choiceQuestion" label-width="60px" :label-position="'right'">
                            <el-form-item label="题目">
                                <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 2, maxRows: 15}"
                                        v-model="choiceQuestion.question"
                                        placeholder="请输入题目内容"
                                        clearable></el-input>
                            </el-form-item>
                            <el-form-item label="分类">
                                <el-select v-model="choiceQuestion.categoryIds"
                                           multiple
                                           placeholder="请选择分类"
                                           style="width: 100%">
                                    <el-option
                                            v-for="item in categories"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                        <span style="float: left">{{ item.name }}</span>
                                    </el-option>
                                    <el-option :disabled="true">
                                        <el-button type="text" @click="addCategoryButton">
                                            新增分类
                                        </el-button>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                    v-for="(choice, index) in choiceQuestion.choices"
                                    :label="'选项' + (index+1)">
                                <el-input v-model="choice.value" placeholder="请输入选项内容"
                                          style="width: 85%"></el-input>
                                <el-button @click.prevent="removeChoiceInput(choice)" style="float: right;width: 10%">
                                    删除
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="addChoiceInput">新增选项</el-button>
                            </el-form-item>
                            <el-form-item label="答案">
                                <el-checkbox-group v-model="choiceQuestion.answer">
                                    <el-checkbox-button v-for="(choiceName,index) in choiceNames" :label="index"
                                                        :key="choiceName">
                                        {{choiceName}}
                                    </el-checkbox-button>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="公开">
                                <el-switch v-model="choiceQuestion.open"></el-switch>
                            </el-form-item>
                        </el-form>
                        <el-row type="flex" justify="center" align="middle">
                            <el-button type="primary" @click="addChoice">新增</el-button>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>

        <el-tab-pane label="新增填空题">
            <el-row type="flex" justify="center" align="middle" style="height:100%">
                <el-col style="width:800px;">
                    <el-card class="box">
                        <p style="text-align: center">新增填空题</p>
                        <el-form ref="form" :model="blankQuestion" label-width="60px" :label-position="'right'">
                            <el-form-item label="题目">
                                <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 2, maxRows: 15}"
                                        v-model="blankQuestion.question"
                                        placeholder="请输入题目内容"
                                        clearable></el-input>
                            </el-form-item>
                            <el-form-item label="分类">
                                <el-select v-model="blankQuestion.categoryIds"
                                           multiple
                                           placeholder="请选择分类"
                                           style="width: 100%">
                                    <el-option
                                            v-for="item in categories"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                        <span style="float: left">{{ item.name }}</span>
                                    </el-option>
                                    <el-option :disabled="true">
                                        <el-button type="text" @click="addCategoryButton">
                                            新增分类
                                        </el-button>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                    v-for="(answer, index) in blankQuestion.answers"
                                    :label="'答案' + (index+1)">
                                <el-input v-model="blankQuestion.answers[index]" placeholder="请输入答案内容"
                                          style="width: 85%"></el-input>
                                <el-button @click.prevent="removeAnswerInput(index)" style="float: right;width: 10%">
                                    删除
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="addAnswer">新增答案</el-button>
                            </el-form-item>
                            <el-form-item label="公开">
                                <el-switch v-model="blankQuestion.open"></el-switch>
                            </el-form-item>
                        </el-form>
                        <el-row type="flex" justify="center" align="middle">
                            <el-button type="primary" @click="addBlank">新增</el-button>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>

        <el-tab-pane label="新增判断题">
            <el-row type="flex" justify="center" align="middle" style="height:100%">
                <el-col style="width:800px;">
                    <el-card class="box">
                        <p style="text-align: center">新增判断题</p>
                        <el-form ref="form" :model="judgeQuestion" label-width="60px" :label-position="'right'">
                            <el-form-item label="题目">
                                <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 2, maxRows: 15}"
                                        v-model="judgeQuestion.question"
                                        placeholder="请输入题目内容"
                                        clearable></el-input>
                            </el-form-item>
                            <el-form-item label="分类">
                                <el-select v-model="judgeQuestion.categoryIds"
                                           multiple
                                           placeholder="请选择分类"
                                           style="width: 100%">
                                    <el-option
                                            v-for="item in categories"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                        <span style="float: left">{{ item.name }}</span>
                                    </el-option>
                                    <el-option :disabled="true">
                                        <el-button type="text" @click="addCategoryButton">
                                            新增分类
                                        </el-button>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="答案">
                                <el-radio v-model="judgeQuestion.answer" label="0">对
                                </el-radio>
                                <el-radio v-model="judgeQuestion.answer" label="1">错
                                </el-radio>
                            </el-form-item>
                            <el-form-item label="公开">
                                <el-switch v-model="judgeQuestion.open"></el-switch>
                            </el-form-item>
                        </el-form>
                        <el-row type="flex" justify="center" align="middle">
                            <el-button type="primary" @click="addJudge">新增</el-button>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>

        <el-tab-pane label="新增解答题">
            <el-row type="flex" justify="center" align="middle" style="height:100%">
                <el-col style="width:800px;">
                    <el-card class="box">
                        <p style="text-align: center">新增解答题</p>
                        <el-form ref="form" :model="solveQuestion" label-width="60px" :label-position="'right'">
                            <el-form-item label="题目">
                                <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 2, maxRows: 15}"
                                        v-model="solveQuestion.question"
                                        placeholder="请输入题目内容"
                                        clearable></el-input>
                            </el-form-item>
                            <el-form-item label="分类">
                                <el-select v-model="solveQuestion.categoryIds"
                                           multiple
                                           placeholder="请选择分类"
                                           style="width: 100%">
                                    <el-option
                                            v-for="item in categories"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                        <span style="float: left">{{ item.name }}</span>
                                    </el-option>
                                    <el-option :disabled="true">
                                        <el-button type="text" @click="addCategoryButton">
                                            新增分类
                                        </el-button>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="答案">
                                <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 3, maxRows: 15}"
                                        v-model="solveQuestion.answer"
                                        placeholder="请输入答案"
                                        clearable></el-input>
                            </el-form-item>
                            <el-form-item label="公开">
                                <el-switch v-model="solveQuestion.open"></el-switch>
                            </el-form-item>
                        </el-form>
                        <el-row type="flex" justify="center" align="middle">
                            <el-button type="primary" @click="addSolve">新增</el-button>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>

        </el-tab-pane>
    </el-tabs>

</div>
</body>

<script src="../../js/vue.js"></script>
<script src="../../js/axios-0.18.0.js"></script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script src="../../plugins/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css">

<script src="../../js/common.js"></script>
<script src="../../js/add_question.js"></script>
<script src="../../js/menu.js"></script>

<link rel="stylesheet" href="../../css/common.css">
</html>